<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="./css/designer.css" />
  <script language="javascript" type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="./lib/jqueryui/jquery-ui.min.js"></script>
  <script language="javascript" type="text/javascript" src="./lib/JsBarcode/JsBarcode.all.js"></script>
  <script language="javascript" type="text/javascript" src="./lib/qrcode/qrcode.js"></script>
  <script language="javascript" type="text/javascript" src="./lib/datamatrix/datamatrix.js"></script>
  <script language="javascript" type="text/javascript" src="./lib/canvg/umd.min.js"></script>
  <link rel="stylesheet" href="./lib/jqueryui/smoothness/jquery-ui.css" />
  <script language="javascript" type="text/javascript" src="./js/designer.js"></script>
  <script language="javascript" type="text/javascript" src="./js/designer_propertyInspector.js"></script>
  <script language="javascript" type="text/javascript" src="./js/designer_toolbar.js"></script>
  <script language="javascript" type="text/javascript" src="./js/tools/rectangle.js"></script>
  <script language="javascript" type="text/javascript" src="./js/tools/barcode.js"></script>
  <script language="javascript" type="text/javascript" src="./js/tools/text.js"></script>
  <script language="javascript" type="text/javascript" src="./js/tools/image.js"></script>
  <script language="javascript" type="text/javascript" src="./js/tools/qrcode.js"></script>
  <script language="javascript" type="text/javascript" src="./js/ruler.js"></script>
</head>

<body>
  <div class="size-controller">
    <div class="item">宽度(mm):</div>
    <input id="labelWidth" type="text" />
    <div class="item">高度(mm):</div>
    <input id="labelHeight" type="text" />
    <div class="item">显示缩放倍率:</div>
    <input id="labelScale" type="text" />
    <button style="margin-left: 20px; height: 24px" id="saveData">保存数据</button>
    <button style="margin-left: 20px; height: 24px" id="openWin">在新窗口打开</button>
  </div>

  <div style="display: flex; height: calc(100vh - 40px);">
    <div id="toolsViewContainer" class="tools"></div>
    <div style="width: 90%;height: 75%;">
      <canvas id="rulerCanvas"></canvas>
    </div>
    <div style="position: fixed; z-index: 99;top:15%;left:10%;display: flex;">
      <div id="canvasContainer" class="canvas">
        <div>
          <canvas id="labelDesigner" tabindex="1" width="400" height="300"> </canvas>
        </div>
      </div>
      <div id="designerPropertyContainer" class="property"></div>
    </div>
  </div>
</body>
<script>
  var canvasDesigner = null
  var id
  var getUrl
  var updateUrl
  var token
  var labelData
  var toZpl
  // $('#labelDesigner').focus()
  var canvas = document.getElementById('rulerCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  window.canvasRuler = new CanvasRuler({
    axisWidth: 0.4,
    lineColor: '#000',
    gridWidth: 100,
    gridHeight: 20
  }, canvas);
  canvasRuler.init(canvasRuler.getDrawType().ALL);

  function getUrlParam(name) {
    //构造一个含有目标参数的正则表达式对象
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    //匹配目标参数
    var r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return unescape(r[2])
    } else {
      //返回参数值
      return ''
    }
  }

  function parseParam() {
    let api = decodeURIComponent(getUrlParam('api'))
    id = getUrlParam('id')
    toZpl = api + 'bitmaptozpl'
    updateUrl = api + 'updateContent'
    token = localStorage.getItem('X-Token')
    getUrl = api + 'getbyid'
    // getUrl = decodeURIComponent(getUrlParam('get'))
    // toZpl = decodeURIComponent(getUrlParam('toZpl'))
    // updateUrl = decodeURIComponent(getUrlParam('update'))
    // token = getUrlParam('token')
  }

  function initDesigner() {
    var w = labelData.labelWidth || 60
    var h = labelData.labelHeight || 40
    var s = labelData.labelScale || 8
    canvasDesigner = new com.logicpartners.labelDesigner('labelDesigner', w, h, s)
    canvasDesigner.toolbar.addTool(new com.logicpartners.designerTools.text())
    canvasDesigner.toolbar.addTool(new com.logicpartners.designerTools.rectangle())
    canvasDesigner.toolbar.addTool(new com.logicpartners.designerTools.barcode())
    canvasDesigner.toolbar.addTool(new com.logicpartners.designerTools.qrcode())
    canvasDesigner.toolbar.addTool(new com.logicpartners.designerTools.image())
  }

  $(document).ready(function () {
    parseParam()
    if (!id) return alert('标签ID不能为空')
    $.ajax({
      url: getUrl,
      type: 'get',
      headers: { Authorization: `Bearer ${token}` },
      data: { id: id },
      success: function (r) {
        console.log(r)
        if (!r.data || !r) return alert('未找到有效的标签数据')
        labelData = JSON.parse(r.data.content || '{}')
        initDesigner()
      },
      error: function (e) {
        alert('获取标签数据失败')
        console.log(e)
      },
    })
  })
</script>

</html>